<template>
  <a-modal
    :visible="visible"
    :width="450"
    :confirm-loading="loading"
    :title="title"
    style="justify-content: center;align-items: center"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-transfer
      :data-source="dataSource"
      :list-style="listStyle"
      show-search
      :filter-option="filterOption"
      :target-keys="targetKeys"
      :render="item => item.title"
      @change="handleChange"
      @search="handleSearch"
    />
  </a-modal>
</template>
<script>
export default {
  name: 'HfDeliveryDateListTreeModal',
  data() {
    return {
      listStyle: { height: '250px' },
      dataSource: [],
      targetKeys: [],
      visible: false,
      add: false,
      loading: false,
      title: '请选择要删除的日期'
    }
  },
  methods: {
    loadData(data) {
      let arr = []
      data.forEach(item => {
        arr.push({
          key: item,
          title: item
        })
      })
      this.dataSource = arr
    },
    filterOption(inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    },
    handleChange(targetKeys, direction, moveKeys) {
      // console.log(targetKeys, direction, moveKeys)
      this.targetKeys = targetKeys
    },
    handleSearch(dir, value) {
      // console.log('search:', dir, value)
    },
    handleOk() {
      this.$emit('onChange', this.targetKeys)
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
      this.dataSource = []
      this.targetKeys = []
    }
  }
}
</script>

<style scoped></style>
